<script setup lang="ts">
import { ref } from "vue";
import { PAGINATIONFOOT, stocktakingTypeList } from "@/utils/staticData";
import router from "@/router";

defineOptions({ name: "manageTable" });

defineProps({
  tableHeight: { default: 0, type: Number },
  tableData: { type: Array, default: () => [] },
  pagination: { type: Object, default: () => {} },
  stockStatusList: { type: Array, default: () => [] }
});
const tableRef = ref<HTMLTableElement | null>(null);

/**
 * 跳转详情
 * @param id
 */
const goToDetail = (id: any) => {
  router.push({
    name: "inventoryCountPage",
    query: {
      id: id
    }
  });
};

/**
 * 跳转盘点
 * @param id
 */
const goToCheck = (id: any) => {
  router.push({
    name: "inventoryCountCheckDetail",
    query: {
      id: id
    }
  });
};

defineExpose({});
</script>

<template>
  <el-table
    ref="tableRef"
    :data="tableData"
    class="tableBox"
    style="width: 100%"
    :height="
      tableHeight - (pagination.total > pagination.size ? PAGINATIONFOOT : 0)
    "
  >
    <el-table-column type="selection" min-width="88px" />
    <el-table-column type="index" label="序号" min-width="80px" />
    <el-table-column
      prop="planCode"
      label="盘点计划单号"
      min-width="184px"
      show-overflow-tooltip
    />
    <el-table-column
      prop="stocktakingCode"
      label="盘点单编号"
      min-width="184px"
      show-overflow-tooltip
    />
    <el-table-column
      prop="warehouseName"
      label="盘点仓库"
      min-width="152px"
      show-overflow-tooltip
    />
    <el-table-column
      prop="stocktakingType"
      label="盘点类型"
      min-width="104px"
      show-overflow-tooltip
    >
      <template #default="{ row }">
        {{
          stocktakingTypeList.find(val => val.value === row.stocktakingType)
            ?.label
        }}
      </template>
    </el-table-column>
    <el-table-column
      prop="createName"
      label="盘点单创建人"
      min-width="136px"
      show-overflow-tooltip
    />
    <el-table-column
      prop="createTime"
      label="盘点单创建时间"
      min-width="200px"
      show-overflow-tooltip
    />
    <el-table-column
      prop="leaderUserName"
      label="盘点人"
      min-width="104px"
      show-overflow-tooltip
    />
    <el-table-column
      prop="status"
      label="盘点状态"
      min-width="104px"
      show-overflow-tooltip
    >
      <template #default="{ row }">
        {{
          stockStatusList.find(val => val.dictLabelValue == row.status)
            ?.dictLabelName
        }}
      </template>
    </el-table-column>
    <el-table-column
      prop="updateTime"
      label="最近状态变更时间"
      min-width="200px"
      show-overflow-tooltip
    />
    <el-table-column
      prop="memo"
      label="备注"
      min-width="200px"
      show-overflow-tooltip
    />
    <el-table-column fixed="right" label="操作" align="left" min-width="128px">
      <template #default="{ row }">
        <el-button type="primary" link @click="goToDetail(row.id)"
          >详情</el-button
        >
        <el-button
          v-if="row.status === 1"
          type="primary"
          link
          @click="goToCheck(row.id)"
          >盘点</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
